<template>
    <div :class="['main-layout', collapse && 'collapse']">
        <aside>
            <header>管理系统</header>
            <main>
                <MyMenuList :collapse="collapse" :active="active" :menuList="newMenuList" @menuClick="menuClick" />
            </main>
        </aside>
        <main>
            <nav>
                <el-button style="float: left;" size="small" @click="collapse = !collapse"
                    :icon="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" />

                <span class="menu-info">
                    当前页面:{{ menuInfo }}
                </span>

                <el-dropdown class="my-dropdown" trigger="click">
                    <span class="el-dropdown-link">
                        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- 这里是给 el-dropdown-item 绑定的click事件，click事件是一个自定义事件，如果这个组件没有实现这个自定义事件，那么事件会失效 -->
                        <!-- click事件有修饰符 -->
                        <el-dropdown-item v-on:click.native="OnLoginOut"
                            icon="el-icon-switch-button">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </nav>
            <article>
                <router-view></router-view>
            </article>
        </main>
    </div>
</template>

<script>
import MyMenuList from './MyMenuList.vue'
export default {
    components: {
        MyMenuList
    },
    data() {
        return {
            collapse: false,
            newMenuList: [],
            menuInfo: '首页',
            active: '',
            menuList: [],
        }
    },
    watch: {

    },
    computed: {

    },
    mounted() {
        this.$nextTick(() => {
            this.menuInfo = this.$route.name
            this.active = this.$route.path
            console.log(this.$route,'路由信息',this.$router.options.routes)
        })
        // this.newMenuList = this.makeTree(this.menuList)
        // 重组路由
        this.newMenuList = this.$router.options.routes.filter(it => it.path !== '/login' && it.path !== '/')
        .map(val=>{
            val.children&&val.children.forEach(item=>{
                item.path = val.path + item.path
            })
            return val
        })
    },
    methods: {
        // 一维数组变多维数组 -- 性能消耗高 -- 递归
        makeTree(arr, pId) {
            let newArr = arr.filter(it => (!pId ? !it.parent_id : pId === it.parent_id))
            newArr.map(it => {
                // 执行递归查询 -- 如果有子节点的节点需要进行递归业务
                // 在数组中查询是否有对象的 parent_id 和我的 id 相等，如果有，那么我就有子节点，否则没有子节点
                let hasChildren = arr.findIndex(item => item.parent_id === it.id) > -1
                if (hasChildren) {
                    it.children = this.makeTree(arr, it.id)
                }
            })
            return newArr
        },

        // 退出系统
        OnLoginOut() {
            // 退出时，要把缓存移出
            sessionStorage.clear()
            this.$store.commit('common/clear')
            this.$router.push('/login')
        },
        menuClick(menu) {
            console.log(menu, '点击的菜单')
            this.menuInfo = menu.name
        },
    }
}
</script>

<style lang="less" scoped>
@import "../assets/common.less";

.main-layout {
    display: flex;
    position: relative;
    height: 100%;

    &.collapse {
        >aside {
            flex: 0 0 64px;
        }
    }

    >aside {
        flex: 0 0 240px;
        height: 100%;
        transition: all .25s linear;
        background: #545c64;
        width: 0;

        >header {
            display: block;
            position: relative;
            height: 48px;
            border-bottom: solid 1px white;
            padding-left: 64px;
            font-size: .8rem;
            color: white;
            line-height: 48px;
            overflow: hidden;
            white-space: nowrap;

            &::before {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                height: 48px;
                width: 64px;
            }
        }

        >main {
            display: block;
            position: relative;
            height: calc(100% - 48px);
            overflow-x: hidden;
        }
    }

    >main {
        flex: 1;
        width: 0;

        >nav {
            display: block;
            height: 48px;
            padding: 8px 12px;
            background: white;

            // 因为导航栏中有很多标签，浮动在左右--清除浮动
            &::after {
                content: '';
                display: block;
                height: 0;
                width: 0;
                clear: both;
            }

            .menu-info {
                float: left;
                margin-left: 10px;
                font-size: 14px;
                color: #666;
                line-height: 32px;
            }
        }

        >article {
            display: block;
            position: relative;
            height: calc(100% - 48px);
            padding: 12px;
            overflow-x: hidden;
        }
    }
}

.menu-icon {
    .font-cls(@color: #fff);
}

.my-dropdown {
    color: #409EFF;
    float: right;
    line-height: 32px;
}
::v-deep(.el-menu){
    .is-active{
        .el-submenu__title{
            color: #409EFF;
        }
    }
}
</style>